import { useRoutes,Navigate } from 'react-router-dom'
import { lazy,Suspense } from 'react'


const Login = lazy(()=>import('../pages/login'))
const Main = lazy(()=>import('../pages/main'))
const About = lazy(()=>import('../pages/main/about'))
const Home = lazy(()=>import('../pages/main/home'))
const List = lazy(()=>import('../components/list'))
const Loading = lazy(()=>import('../components/loading'))

// import Loading from '../components/loading'
// import Login from '../pages/login'
// import Main from '../pages/main'
// import About from "../pages/main/about"
// import Home from "../pages/main/home"
// import List from "../components/list"

const login=(Comp)=>{
    return (<Suspense fallback={<Loading />}>
    <Comp />
  </Suspense>)
}

const routes=[
    {
        path:"/login",
        element: login(Login)
    },
    {
        path:"/main",
        element:login(Main),
        children:[
            {
                path:"/main/about",
                element:login(About),
                children:[
                    {
                        path:"/main/about/news/:id",
                        element:login(List)
                    },
                    {
                        path:"/main/about/vedios/:id",
                        element:login(List)
                    },
                ]
            },
            {
                path:"/main/home",
                element:login(Home)
            },
        ]
    },
    {
        path:"/",
        element:<Navigate to="/login"/>
    },
    {
        path:"*",
        element:<Navigate to="/login"/>
    },

]
export default routes

export const MyRoutes=()=>{
   return useRoutes(routes)
}

export const useMyRoute=()=>{
    return useRoutes(routes)
}